<template>
  <div id="app">
    <Header notab="join"/>
    <div class="contentWeb">
      <div class="joinSearch clear">
        <div class="sername">招聘会关键字</div>
        <div class="searchinput">

          <el-input placeholder="请输入内容" v-model="search.title" class="input-with-select">

            <el-button slot="append" @click="getpost(1)" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="searchsele">
          <!-- <el-select v-model="info.city"  placeholder="举办城市">
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select> -->
        </div>
        <div class="searchsele">
          <el-date-picker
            v-model="search.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="getpost(1)"
            placeholder="选择时间">
          </el-date-picker>
        </div>
      </div>
      <div class="listcount">共有<span>{{total}}个</span>符合条件的招聘会信息</div>
      <div class="joincontent clear" v-for="(item,index) in list" :key="index">
        <div :class="{'sutatusimg': true, 'end': item.zphzt == 4, 'will': item.zphzt == 2}"></div>
        <div class="joinLeft" @click="todetail(item)">
          <img :src="item.banner">
        </div>
        <div class="joinRight" @click="todetail(item)">
          <el-tooltip :content="item.title" placement="top">
            <div class="titlte" style="overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 681px;">{{item.title}}</div>
          </el-tooltip>
          <div class="deac"><span>举办城市</span><span class="nr">{{item.city}}</span></div>
          <div class="deac"><span>详细地址</span><span class="nr">{{item.address}}</span></div>
          <div class="deac"><span>咨询电话</span><span class="nr">{{item.telno}} {{item.telno2}}</span></div>
          <div class="deac"><span>举办时间</span><span class="nr">{{item.startTime}} - {{item.endtime}}</span></div>
        </div>
        <div class="btnstu">
          <!-- recruitState:0 简历禁用  -->
          <button type="button" v-if="item.zphzt < 4"
            :disabled="item.joinStatus == 2 || item.recruitState === 0"
            @click="tobaoming(item)" :class="(!item.joinStatus || item.joinStatus == 1) ? 'baoming': 'baoming end'">
            {{(!item.joinStatus || item.joinStatus == 1 )? '报名' : '已报名'}}
          </button>
        </div>
      </div>
    </div>
    <Noview v-if="total === 0"/>
    <div style="text-align: center" v-if="total > 0">
      <el-pagination background layout="prev, pager, next" :page-size="search.pageSize" :current-page="search.pageNum" @current-change="getpost" :total="total"></el-pagination>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import { AllJobFairByPage, getAllJobFair, enterpriseJoinJopFair, personalJoinJopFair } from '../../assets/js/domains'
import zp from '../../assets/img/zp.png'
import Noview from '../../components/noview'
import moment from 'moment'
export default {
  name: 'Join',
  components: {
    Header,
    Footer,
    Noview
  },
  directives: {},
  data: function () {
    return {
      zp: zp,
      info: {
        zhiwei: '',
        city: '东港市'
      },
      options: [{ label: '东港市' }],
      list: [],
      total: 0,
      search: { pageNum: 1, pageSize: 36, title: '', startTime: '' }
    }
  },
  created: function () {
    document.title = '招聘会'
    if (localStorage.getItem('shenfen') == 1) {
      this.search.enterpriseUid = localStorage.getItem('md_enterpriseUid')
    } else {
      this.search.userUid = localStorage.getItem('md_user_uid')
    }
  },
  computed: {},
  mounted: function () {
    this.getpost()
  },
  methods: {
    tobaoming: function (item) {
      const _this = this
      const shenfen = localStorage.getItem('shenfen')
      if (shenfen * 1 === 1) {
        if (this.curUserInfo.approval != 2) {
          this.$message.error('企业还未通过审核，不能报名招聘会')
          return
        }
        if(item.zphJzrq && new Date(item.zphJzrq) < new Date()){
          this.$message.error('招聘会报名已截止，不能报名招聘会')
          return
        }
        window.location.href = 'joinAdd.html?id=' + item.id
        return
      }
      if (!this.curUserInfo.userUid) {
        this.$message.warning('请先登录！')
        return
      }
      if (!this.curUserInfo.approval || this.curUserInfo.approval != 2) {
        this.$message.warning('用户未通过审核，不能报名招聘会')
        return
      }
      if (this.curUserInfo.jlzt != 1) {
        this.$message.warning('简历异常，请完善简历')
        return
      }
      personalJoinJopFair({ jobFairId: item.id, userUid: this.curUserInfo.userUid, joinStatus: 2 }).then(function (res) {
        if (res.code === 200) {
          _this.$alert('报名成功', '提示', {
            confirmButtonText: '确定',
            callback: function () {
              _this.getpost()
            }
          })
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getpost: function (e) {
      const _this = this
      if (e) {
        this.search.pageNum = e
      }

      if (this.search.startTime) {
        this.search.startTime = this.search.startTime
      } else {
        this.search.startTime = ''
      }
      const shenfen = localStorage.getItem('shenfen')
      const api = shenfen == 1 ? AllJobFairByPage : getAllJobFair

      api(this.search).then(function (res) {
        if (res.code === 200) {
          _this.list = res.data.content
          _this.total = res.data.totalElements
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    todetail: function (row) {
      window.location.href = 'joinDetail.html?id=' + row.id + '&joinStatus=' + row.joinStatus
    }
  }
}
</script>
<style lang="less">
  @import "../../assets/css/join";
</style>
